﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>编辑会员</title>
    <link rel="stylesheet" href="~/lib/element-ui/theme-chalk/index.css">
    <link rel="stylesheet" href="~/admin/css/default/style.css">
</head>

<body class="mainbody">
    <div id="app" v-cloak>
        <div class="location">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>
                    <i class="el-icon-s-home"></i>
                    管理中心
                </el-breadcrumb-item>
                <el-breadcrumb-item>首页</el-breadcrumb-item>
                <el-breadcrumb-item>会员管理</el-breadcrumb-item>
                <el-breadcrumb-item>编辑会员</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <div class="content-box">
            <el-tabs v-model="activeName" type="card">
                <el-tab-pane label="账户信息" name="account">
                    <div class="tab-content">
                        <el-form ref="editForm1" :model="model" :rules="rules" :label-position="labelPosition" label-width="120px">
                            <el-form-item label="所属站点">
                                <el-select v-model="model.siteId" placeholder="请选择...">
                                    <el-option v-for="item in siteList"
                                               :key="item.id"
                                               :label="item.title"
                                               :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="所属组别">
                                <el-select v-model="model.groupId" placeholder="请选择...">
                                    <el-option v-for="item in groupList"
                                               :key="item.id"
                                               :label="item.title"
                                               :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="账户状态">
                                <el-radio-group v-model="model.status">
                                    <el-radio-button label="0">正常</el-radio-button>
                                    <el-radio-button label="1">待验证</el-radio-button>
                                    <el-radio-button label="2">待审核</el-radio-button>
                                    <el-radio-button label="3">黑名单</el-radio-button>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item prop="userName" label="用户名">
                                <el-input v-model="model.userName" placeholder="唯一名称，不可重复"></el-input>
                            </el-form-item>
                            <el-form-item label="登录密码" v-if="model.id>0">
                                <el-input v-model="model.password" placeholder="登录密码,不修改请留空"></el-input>
                            </el-form-item>
                            <el-form-item prop="password" label="登录密码" v-else>
                                <el-input show-password v-model="model.password" placeholder="必填，最少6位英文字母"></el-input>
                            </el-form-item>
                            <el-form-item prop="email" label="电子邮箱">
                                <el-input v-model="model.email" placeholder="非必填，电子邮箱不可重复"></el-input>
                            </el-form-item>
                            <el-form-item prop="phone" label="手机号码">
                                <el-input v-model="model.phone" placeholder="非必填，手机号不可重复"></el-input>
                            </el-form-item>
                            <el-form-item label="账户余额" v-if="model.id>0">
                                {{model.amount}}
                            </el-form-item>
                            <el-form-item label="账户积分" v-if="model.id>0">
                                {{model.point}}
                            </el-form-item>
                            <el-form-item label="经验值" v-if="model.id>0">
                                {{model.exp}}
                            </el-form-item>
                        </el-form>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="个人资料" name="info">
                    <div class="tab-content">
                        <el-form ref="editForm2" :model="model" :rules="rules" :label-position="labelPosition" label-width="120px">
                            <el-form-item label="会员头像">
                                <dt-upload v-model="model.avatar"></dt-upload>
                            </el-form-item>
                            <el-form-item label="真实姓名">
                                <el-input v-model="model.realName" placeholder="非必填，可空"></el-input>
                            </el-form-item>
                            <el-form-item prop="sex" label="性别">
                                <el-radio-group v-model="model.sex">
                                    <el-radio-button label="保密">保密</el-radio-button>
                                    <el-radio-button label="男">男</el-radio-button>
                                    <el-radio-button label="女">女</el-radio-button>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="生日">
                                <el-date-picker v-model="model.birthday" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"></el-date-picker>
                            </el-form-item>
                            <el-form-item label="注册时间" v-if="model.id>0">
                                {{model.regTime}}
                            </el-form-item>
                            <el-form-item label="注册IP" v-if="model.id>0">
                                {{model.regIp}}
                            </el-form-item>
                            <el-form-item label="最后登录时间" v-if="model.id>0">
                                {{model.lastTime}}
                            </el-form-item>
                            <el-form-item label="最后登录IP" v-if="model.id>0">
                                {{model.lastIp}}
                            </el-form-item>
                        </el-form>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>

        <div class="footer-box">
            <div class="footer-btn">
                <el-button type="primary" @@click="submitForm('editForm')">确认保存</el-button>
                <el-button plain @@click="resetForm">取消返回</el-button>
            </div>
        </div>
    </div>

    <script src="~/lib/vue/vue.js"></script>
    <script src="~/lib/element-ui/index.js"></script>
    <script src="~/lib/axios/axios.min.js"></script>
    <script src="~/lib/babel-polyfill/polyfill.min.js"></script>
    <script src="~/admin/js/axios.config.js"></script>
    <script src="~/admin/js/upload.component.js"></script>
    <script>
        //初始化VUE
        var ve = new Vue({
            el: '#app',
            data: {
                activeName: 'account',//当前选项卡
                labelPosition: 'right',//表单对齐方式
                siteList: [],//站点列表
                groupList: [],//会员组列表
                model: {
                    id: 0,
                    userId: null,
                    siteId: null,
                    groupId: null,
                    groupTitle: null,
                    userName: null,
                    email: null,
                    phone: null,
                    password: null,
                    avatar: null,
                    realName: null,
                    sex: '保密',
                    birthday: null,
                    amount: 0,
                    point: 0,
                    exp: 0,
                    status: 0,
                    regIp: null,
                    regTime: null,
                    lastIp: null,
                    lastTime: null,
                },
                rules: {
                    siteId: [
                        { required: true, message: '请选择所属站点', trigger: 'change' }
                    ],
                    groupId: [
                        { required: true, message: '请选择所属会员组', trigger: 'change' }
                    ],
                    userName: [
                        { required: true, message: '请输入登录用户名', trigger: 'blur' },
                        { min: 3, max: 128, message: '长度在 3 到 128 个字符', trigger: 'blur' },
                        { pattern: /^[a-zA-Z0-9_]*$/, message: '只能是字母数字下划线', trigger: 'blur' }
                    ],
                    email: [
                        { pattern: /^(\w)+(\.\w+)*@@(\w)+((\.\w+)+)$/, message: '邮箱格式有误', trigger: 'blur' }
                    ],
                    phone: [
                        { pattern: /^1[0-9]{10}$/, message: '手机号码格式不正确', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入登录密码', trigger: 'blur' },
                        { min: 6, max: 128, message: '密码长度在至少6位', trigger: 'blur' },
                        { pattern: /^[a-zA-Z][a-zA-Z0-9_]*$/, message: '以字母开头至少包含数字', trigger: 'blur' }
                    ],
                    sex: [
                        { required: true, message: '请选择性别', trigger: 'change' }
                    ]
                }
            },
            methods: {
                //初始化数据
                initData: function () {
                    let _this = this; //当前页面
                    let id = GetQueryValue("id"); //获取ID
                    if (id) {
                        AxiosAjax({
                            url: '/member/' + id,
                            loading: true,
                            success: function (res) {
                                //赋值给model
                                Object.keys(_this.model).forEach(key => { _this.model[key] = res.data[key] });
                            }
                        });
                    }
                    //加载父站点列表
                    AxiosAjax({
                        url: '/site/view/0',
                        loading: true,
                        success: function (res) {
                            _this.siteList = res.data
                        }
                    });
                    //加载会员组列表
                    AxiosAjax({
                        url: '/member/group/view/0',
                        loading: true,
                        success: function (res) {
                            _this.groupList = res.data
                        }
                    });
                },
                submitForm: function () {
                    let _this = this; //当前页面
                    //多个表单验证
                    const f1 = new Promise((resolve, reject) => {
                        _this.$refs['editForm1'].validate((valid) => {
                            if (valid) resolve()
                        });
                    });
                    const f2 = new Promise((resolve, reject) => {
                        _this.$refs['editForm2'].validate((valid) => {
                            if (valid) resolve()
                        });
                    });
                    Promise.all([f1, f2]).then(() => {
                        //提交表单,Id大于0则修改，否则添加
                        if (_this.model.id > 0) {
                            AxiosAjax({
                                method: 'put',
                                url: '/member/' + _this.model.userId,
                                data: _this.model,
                                loading: true,
                                successMsg: '修改会员已成功',
                                success: function (res) {
                                    //可跳转加列表页
                                    _this.linkUrl('memberlist');
                                }
                            });
                        } else {
                            AxiosAjax({
                                method: 'post',
                                url: '/member',
                                data: _this.model,
                                loading: true,
                                successMsg: '新增会员已成功',
                                success: function (res) {
                                    //重置表单
                                    _this.$refs['editForm1'].resetFields();
                                    _this.$refs['editForm2'].resetFields();
                                }
                            });
                        }
                    })
                },
                //跳转链接
                linkUrl: function (url) {
                    window.location.href = url;
                },
                resetForm() {
                    window.history.back(-1);
                }
            },
            created: function () {
                //初始化数据
                this.initData();
            }
        })
    </script>
</body>
</html>
